<template>
  <el-dialog custom-class="custom" :visible.sync="dialogVisible" width="500px">
    <div slot="title" class="dialog-title">提示信息</div>

    <div class="flexCommon">
      <i class="el-icon-warning el-alert__icon is-big" /><span>&nbsp;&nbsp;{{ content }}</span>
    </div>
    <div v-if="isUnable" style="color: red;">禁用后该应用及模块将无法在接入应用集中使用</div>

    <div slot="footer" class="dialog-footer">
      <el-button round plain @click="cancel">{{ cancelTxt }}</el-button>
      <el-button :loading="loading" type="primary" round @click="confirm">{{ confirmTxt }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'ConfirmDialog',
  props: {
    isUnable: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: '确认是否停用？'
    },
    cancelTxt: {
      type: String,
      default: '取消'
    },
    confirmTxt: {
      type: String,
      default: '确认'
    },
    projectName: {
      type: String,
      default: ''
    },
    isInput: {
      type: Boolean,
      default: false
    },
    isSuccess: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      inputValue: this.projectName
    }
  },
  watch: {
    projectName() {
      this.inputValue = this.projectName
    }
  },
  methods: {
    confirm() {
      this.loading = false
      this.dialogVisible = false
      this.$emit('confirm', () => {
        this.loading = false
      })
    },
    setDialogVisible(val) {
      this.dialogVisible = val
    },
    cancel() {
      this.dialogVisible = false
      this.$emit('cancel')
    },
    changeValue() {
      this.$emit('update:projectName', this.inputValue)
    }
  }
}
</script>
<style lang="scss">
.custom{
  font-weight: 700;
  font-size:14px;
  height: 240px;
  .el-dialog__headerbtn .el-dialog__close{
    color: #fff;
  }
  .el-dialog__header{
    background-color: rgba(37, 148, 255, 1);
    color: #fff;
  }
  .el-dialog__body{
    color: rgba(53, 152, 220, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px 0;
    span{
      color: #333;
    }
    .el-input{
      width: auto;
    }
  }
  .el-dialog__footer{
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
